﻿@model IEnumerable<CSCSN.ViewModels.TakeAndTakeType.TaskViewModel>
@using  CSCSN.ViewModels.TakeAndTakeType
@{
    var aa = ViewData["CountdownTask"] as List<TaskViewModel>;
}
<style>
    span {
        font-size: 28px;
        color: #666;
    }

    em {
        font-style: normal;
        color: red;
        font-size: 28px;
    }
</style>










<div>
    @{ int i = 0;
        foreach (var item in aa)
        {
            if (i == 0)
            {
                <div class="alert alert-danger" role="alert">
                    <span class="span1" id="time1" data-time="@ViewBag.Time">
                        距离任务开始剩余：
                        <!----data-time用来存放你任务到期的时间，时间格式就按照上面格式就好--->
                        <!--每个span的id要唯一，调用函数的时候就是要传id这一个参数-->
                        @*<em></em> 天*@
                        <em></em> 小时
                        <em></em> 分
                        <em></em> 秒
                        <!--em标签用来放置我们所要显示的时间--->

                    </span>
                    <p> <h4>@item.Name</h4></p>
                    <p><h4>@item.TaskSite&emsp;@item.Score</h4></p>
                </div>



            }

            else
            {
                <div class="alert alert-success" role="alert">@item.Name&emsp; @item.TaskSite</div>
            }
            i++;
        }
    }
</div>




<!--倒计时的JS方法--->
<script>
    var obj = document.getElementById('time1')//获取到放置时间数据的span的id
    getTime(obj)//这里用来调用这个函数，传入id
    var myFun = setTimeout(function () { first(obj) }, 100);//一进入页面就调用函数，避免延迟
    function first(obj) {
        var a = new Date((obj.getAttribute("data-time"))).getTime();
        //上面这一步可能比较复杂，我们首先来看obj.getAttribute("data-time")这一句。这个是用来获取指定标签的data-time属性，即我们要使用的到期时间，然后来看new Date().getTime(),这一句是用来获取我们所设置到期时间的时间戳，用于下面的计算，这个获取的是固定的数值
        var b = new Date().getTime();//这是获取当前时间，是一个不固定的数值
        var d = 0, s = 0, h = 0, m = 0;//定义变量
        var ee = obj.getElementsByTagName("em")//获取布局中的em标签用于存取数据
        d = Math.floor((a - b) / 1000 / 60 / 60 / 24);//获取剩余天数
        h = Math.floor((a - b) / 1000 / 60 / 60 % 24);//获取剩余小时
        m = Math.floor((a - b) / 1000 / 60 % 60);//获取剩余分钟
        s = Math.floor((a - b) / 1000 % 60);//获取剩余秒数
        //中间这块区域是用来判断，当前时间数值小于10的时候给他前面加个0，这里可以根据具体情况可加可不加，以下同理
        if (d < 10) {
            d = "0" + d
        } else if (d < 0) {
            d = 0
        }
        if (h < 10) {
            h = "0" + h
        } else if (h < 0) {
            h = 0
        }
        if (m < 10) {
            m = "0" + m;
        } else if (m < 0) {
            m = 0;
        }
        if (s < 10) {
            s = "0" + s;
        } else if (s < 0) {
            s = 0;
        }

        ee[0].innerHTML = h;
        ee[1].innerHTML = m;
        ee[2].innerHTML = s;

        if (a <= b) {//当我们的时间到期的时候，清除计时器，然后把当前标签的内容设置为0；
            clearInterval(time1);
            ee[0].innerHTML = 00;
            ee[1].innerHTML = 00;
            ee[2].innerHTML = 00;
            //ee[3].innerHTML = 00;
        }
    }
    function getTime(obj) {
        var timer = null;//这里设置time为null，用于下面来清除计时器
        timer = setInterval(function () {//设置定时器，来更新时间
            first(obj)
        }, 1000)
    }

</script>

